<template>
  <div class="referral-page">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">🎁 推荐奖励管理</span>
          <el-button type="primary" @click="handleSettings">
            <el-icon><Setting /></el-icon>
            奖励设置
          </el-button>
        </div>
      </template>

      <!-- 统计卡片 -->
      <el-row :gutter="20" class="stat-cards">
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
              <el-icon :size="32"><UserFilled /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">总推荐人数</div>
              <div class="stat-value">{{ totalReferrals }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);">
              <el-icon :size="32"><Select /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">成功注册</div>
              <div class="stat-value success">{{ successReferrals }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);">
              <el-icon :size="32"><Star /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">发放积分</div>
              <div class="stat-value">{{ totalPointsGiven.toLocaleString() }}</div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card">
            <div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);">
              <el-icon :size="32"><TrendCharts /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">转化率</div>
              <div class="stat-value">{{ conversionRate }}%</div>
            </div>
          </div>
        </el-col>
      </el-row>

      <!-- 推荐排行榜 -->
      <div class="referral-ranking">
        <h3>🏆 推荐达人排行榜 TOP 10</h3>
        <el-table :data="referralRanking" border>
          <el-table-column type="index" label="排名" width="60">
            <template #default="{ $index }">
              <div class="rank-badge" :class="'rank-' + ($index + 1)">
                {{ $index + 1 }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="memberName" label="推荐人" width="150" />
          <el-table-column prop="phone" label="手机号" width="130" />
          <el-table-column prop="referralCount" label="推荐人数" width="100">
            <template #default="{ row }">
              <el-tag type="danger">{{ row.referralCount }}人</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="successCount" label="成功注册" width="100">
            <template #default="{ row }">
              <el-tag type="success">{{ row.successCount }}人</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="totalPoints" label="累计奖励" width="120">
            <template #default="{ row }">
              <span style="color: #f56c6c; font-weight: bold;">{{ row.totalPoints }}积分</span>
            </template>
          </el-table-column>
          <el-table-column prop="conversionRate" label="转化率" width="100">
            <template #default="{ row }">
              <span :style="{ color: row.conversionRate > 60 ? '#67c23a' : '#e6a23c' }">
                {{ row.conversionRate }}%
              </span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-button link type="primary" @click="handleViewDetail(row)">查看明细</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 推荐记录 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <div class="card-header">
          <span>📝 推荐记录</span>
          <el-form :inline="true">
            <el-form-item>
              <el-input v-model="searchKeyword" placeholder="搜索推荐人" clearable size="small" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="small">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>

      <el-table :data="referralRecords" border stripe>
        <el-table-column prop="referrerName" label="推荐人" width="150" />
        <el-table-column prop="referrerPhone" label="推荐人手机" width="130" />
        <el-table-column prop="refereeName" label="被推荐人" width="150" />
        <el-table-column prop="refereePhone" label="被推荐人手机" width="130" />
        <el-table-column prop="registerTime" label="注册时间" width="160" />
        <el-table-column prop="status" label="状态" width="100">
          <template #default="{ row }">
            <el-tag :type="getStatusTag(row.status)">
              {{ getStatusText(row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="rewardPoints" label="奖励积分" width="100">
          <template #default="{ row }">
            <el-tag v-if="row.rewardPoints > 0" type="danger">
              +{{ row.rewardPoints }}
            </el-tag>
            <span v-else>-</span>
          </template>
        </el-table-column>
        <el-table-column prop="firstOrderTime" label="首单时间" width="160" />
      </el-table>
    </el-card>

    <!-- 奖励设置对话框 -->
    <el-dialog v-model="settingsDialogVisible" title="推荐奖励设置" width="700px">
      <el-form :model="rewardSettings" label-width="150px">
        <el-form-item label="推荐注册奖励">
          <el-input-number v-model="rewardSettings.registerReward" :min="0" />
          <span style="margin-left: 10px;">积分</span>
          <div class="form-tip">被推荐人成功注册后，推荐人获得奖励</div>
        </el-form-item>

        <el-form-item label="首单奖励">
          <el-input-number v-model="rewardSettings.firstOrderReward" :min="0" />
          <span style="margin-left: 10px;">积分</span>
          <div class="form-tip">被推荐人首次下单后，推荐人额外获得奖励</div>
        </el-form-item>

        <el-form-item label="被推荐人奖励">
          <el-input-number v-model="rewardSettings.refereeReward" :min="0" />
          <span style="margin-left: 10px;">积分</span>
          <div class="form-tip">被推荐人注册后获得的积分</div>
        </el-form-item>

        <el-form-item label="推荐上限">
          <el-input-number v-model="rewardSettings.maxReferrals" :min="0" />
          <span style="margin-left: 10px;">人/天（0为不限制）</span>
        </el-form-item>

        <el-form-item label="奖励有效期">
          <el-input-number v-model="rewardSettings.validDays" :min="0" />
          <span style="margin-left: 10px;">天（0为永久有效）</span>
        </el-form-item>

        <el-form-item label="推荐海报">
          <el-input v-model="rewardSettings.posterUrl" placeholder="海报图片URL" />
        </el-form-item>

        <el-form-item label="推荐文案">
          <el-input v-model="rewardSettings.shareText" type="textarea" :rows="3" />
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="settingsDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="handleSaveSettings">保存</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Plus, Setting, UserFilled, Select, Star, TrendCharts } from '@element-plus/icons-vue'

const totalReferrals = ref(3456)
const successReferrals = ref(2890)
const totalPointsGiven = ref(578000)
const conversionRate = ref(83.6)

const searchKeyword = ref('')

const referralRanking = ref([
  { memberName: '张三', phone: '13800138001', referralCount: 45, successCount: 42, totalPoints: 8400, conversionRate: 93.3 },
  { memberName: '李四', phone: '13800138002', referralCount: 38, successCount: 35, totalPoints: 7000, conversionRate: 92.1 },
  { memberName: '王五', phone: '13800138003', referralCount: 32, successCount: 28, totalPoints: 5600, conversionRate: 87.5 }
])

const referralRecords = ref([
  { 
    referrerName: '张三', referrerPhone: '13800138001',
    refereeName: '新用户A', refereePhone: '13900139001',
    registerTime: '2024-01-20 10:30', status: 'completed',
    rewardPoints: 200, firstOrderTime: '2024-01-20 15:30'
  },
  { 
    referrerName: '李四', referrerPhone: '13800138002',
    refereeName: '新用户B', refereePhone: '13900139002',
    registerTime: '2024-01-20 14:20', status: 'registered',
    rewardPoints: 100, firstOrderTime: ''
  }
])

const settingsDialogVisible = ref(false)

const rewardSettings = reactive({
  registerReward: 100,
  firstOrderReward: 100,
  refereeReward: 50,
  maxReferrals: 10,
  validDays: 365,
  posterUrl: '',
  shareText: '邀请好友注册，双方都可获得积分奖励！'
})

const getStatusTag = (status) => {
  const map = { registered: 'primary', completed: 'success', expired: 'info' }
  return map[status] || 'info'
}

const getStatusText = (status) => {
  const map = { registered: '已注册', completed: '已完单', expired: '已过期' }
  return map[status] || status
}

const handleSettings = () => {
  settingsDialogVisible.value = true
}

const handleSaveSettings = () => {
  ElMessage.success('设置保存成功')
  settingsDialogVisible.value = false
}

const handleViewDetail = () => {
  ElMessage.info('查看推荐明细')
}
</script>

<style scoped>
.referral-page {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.stat-cards {
  margin-bottom: 30px;
}

.stat-card {
  display: flex;
  align-items: center;
  padding: 20px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.stat-icon {
  width: 60px;
  height: 60px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  margin-right: 15px;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 24px;
  font-weight: bold;
  color: #303133;
}

.stat-value.success {
  color: #67c23a;
}

.referral-ranking {
  margin-bottom: 20px;
}

.referral-ranking h3 {
  margin: 0 0 20px 0;
  color: #303133;
}

.rank-badge {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  color: white;
  margin: 0 auto;
}

.rank-1 {
  background: linear-gradient(135deg, #f5af19 0%, #f12711 100%);
}

.rank-2 {
  background: linear-gradient(135deg, #c0c0c0 0%, #8e9eab 100%);
}

.rank-3 {
  background: linear-gradient(135deg, #cd7f32 0%, #8b4513 100%);
}

.form-tip {
  font-size: 12px;
  color: #909399;
  margin-top: 5px;
}
</style>

